<html>
<title>组件模板</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container">
        <my-world></my-world>
    </div>
    <!-- template必须有且只有一个跟元素  -->
    <template id="wbs">
        <div>
            <h3>{{ msg }}</h3>
            <ul>
                <li v-for="value in arr">{{ value }}</li>
            </ul>
        </div>
    </template>
    <script>
        var vm = new Vue({
            data: {
                flag: false
            },
            components: {
                'my-world': {
                    // name是为了指定再浏览器vue插件中显示的模板实例的名称，可以不指定，不指定默认是采用的组件名称my-world显示
                    name: 'myTemplate',
                    template: '#wbs',
                    //组件中传入的数据必须用data方法
                    data() {
                        return {
                            msg: "Hello World",
                            arr: ["tom", "jerry", "mike"]
                        }
                    }
                }
            }
        }).$mount('.container');
    </script>

</body>

</html>